<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>export与import的复合写法</title>
</head>
<body>
    <h1>export与import的复合写法</h1>

    <script type="module">
        // 接口改名
        export { foo as myFoo } from './moduleA.js';

        // 整体输出
        export * from './moduleB.js';

        // 具名接口改为默认接口
        export { es6 as default } from './moduleC.js';

        // 默认接口改名为具名接口
        export { default as es6 } from './moduleD.js';

        // 复合写法实例
        // subModule.js
        export const name = '子模块';
        export function getData() {
            return 'some data';
        }

        // mainModule.js
        export { name, getData } from './subModule.js';
        // 等同于
        import { name, getData } from './subModule.js';
        export { name, getData };

        // 实际应用示例
        // api/users.js
        export async function getUsers() {
            const response = await fetch('/api/users');
            return response.json();
        }

        // api/posts.js
        export async function getPosts() {
            const response = await fetch('/api/posts');
            return response.json();
        }

        // api/index.js
        export { getUsers } from './users.js';
        export { getPosts } from './posts.js';
        export { default as config } from './config.js';

        // main.js
        import { getUsers, getPosts, config } from './api/index.js';

        async function init() {
            const [users, posts] = await Promise.all([
                getUsers(),
                getPosts()
            ]);
            console.log({ users, posts, config });
        }
    </script>
</body>
</html> 